<template>
	<div>
		<AsyncCom/>
		<br/>
		<hr/>
		<br/>
		<AsyncCom1/>
	</div>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import LoadingComponent from './Loading.vue';
import ErrorComponent from './Error.vue';
// const AsyncComp = defineAsyncComponent(() => {
//     return new Promise((resolve, reject) => {
//         // ...从服务器获取组件
//         resolve(/* 获取到的组件 */)
//     })
// })
const AsyncCom = defineAsyncComponent(() => import('./Child.vue'))
const AsyncCom1 = defineAsyncComponent({
	// 加载函数
	loader: () => import('./Child.vue'),

	// 加载异步组件时使用的组件
	loadingComponent: LoadingComponent,
	// 展示加载组件前的延迟时间，默认为 200ms
	delay: 200,

	// 加载失败后展示的组件
	errorComponent: ErrorComponent,
	// 如果提供了一个 timeout 时间限制，并超时了
	// 也会显示这里配置的报错组件，默认值是：Infinity
	timeout: 3000
})

</script>
<style lang='less' scoped></style>
